<!DOCTYPE html>
<html>
    <head>
        <title>TicTacToe</title>
        <style>
            .cell {
                width: 100px;
                height: 100px;
                background-color: green;
                display: inline-block;
                border: 1px solid white;
                vertical-align: middle;
                line-height: 100px;
                font-size: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="board"></div>


        <script>
            let pattern = [
                [2, 0, 0],
                [0, 1, 0],
                [0, 0, 0]
            ];

            let color = 1;

            function show() {
                let board = document.getElementById("board");
                board.innerHTML = "";


                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 3; j++) {
                        let cell = document.createElement("div");
                        cell.classList.add("cell");
                        cell.innerText = pattern[j][i] === 2 ? "✖" :
                            pattern[j][i] === 1 ? "◎" : "";
                        cell.addEventListener("click", () => move(j, i));
                        board.appendChild(cell);
                    }
                    board.appendChild(document.createElement("br"));
                }
            }

            function move(y, x) {
                pattern[y][x] = color;
                if (check(pattern, color)) {
                    alert(color === 2 ? "✖ is winner!" : "◎ is winner!");
                }
                color = 3 - color;
                show();
                if (willWin(pattern, color)) {
                    console.log(color === 2 ? "✖ will win!" : "◎ will win!");
                }
            }

            function check(pattern, color) {
                // 判断每一行是否有三格相等
                for (let i = 0; i < 3; i++) {
                    let win = true;
                    for (let j = 0; j < 3; j++) {
                        if (pattern[i][j] !== color) {
                            win = false;
                        }
                    }
                    if (win) {
                        return true;
                    }
                }
                // 判断每一列是否有三格相等
                for (let i = 0; i < 3; i++) {
                    let win = true;
                    for (let j = 0; j < 3; j++) {
                        if (pattern[j][i] !== color) {
                            win = false;
                        }
                    }
                    if (win) {
                        return true;
                    }
                }
                // 判断右上角到左下角对角线是否有三格相等
                {
                    let win = true;
                    for (let j = 0; j < 3; j++) {
                        if (pattern[j][2 - j] !== color) {
                            win = false;
                        }
                    }
                    if (win) {
                        return true;
                    }
                }
                // 判断左上角到右下角对角线是否有三格相等
                {
                    let win = true;
                    for (let j = 0; j < 3; j++) {
                        if (pattern[j][j] !== color) {
                            win = false;
                        }
                    }
                    if (win) {
                        return true;
                    }
                }
                return false;
            }

            function clone(pattern) {
                return JSON.parse(JSON.stringify(pattern));
            }

            // 判断下一步可能为赢
            function willWin(pattern, color) {
                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 3; j++) {
                        if (pattern[i][j]) {
                            continue;
                        }
                        let tmp = clone(pattern);
                        tmp[i][j] = color;
                        if (check(tmp, color)) {
                            return [j, i];
                        }
                    }
                }
                return null;
            }

            // 找最好的选择，就是对方最差的选择
            function bestChoice(pattern, color) {
                let p;
                if (p = willWin(pattern, color)) {
                    return {
                        point: p,
                        result: 1,
                    }
                }

                // 初始值-2，有点可走就不会是-2
                let result = -2;
                let point = null;
                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 3; j++) {
                        if (pattern[i][j]) {
                            continue;
                        }
                        let tmp = clone(pattern);
                        tmp[i][j] = color;
                        let r = bestChoice(tmp, 3-color).result;

                        if (-r > result) {
                            result = -r;
                            point = [j, i];
                        }
                    }
                }
                return {
                    point,
                    result: point ? result : 0,
                };
            }

            show();
            console.log(bestChoice(pattern, color));
        </script>
    </body>
</html>